import React, { Component } from 'react'
import { NavBar } from 'antd-mobile';
import "./cart.scss"
import Timg from "../../imgs/timg.gif"
export default class cart extends Component {
  state = {
    carts: [],

  }
  //获取本地缓存中的购物车数据
  componentDidMount() {
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str || "[]");
    this.setState({
      carts
    })
  }
  // handleClickNum = (params) => {
  //   let carts_str = localStorage.getItem("carts");
  //   let carts = JSON.parse(carts_str || "[]");
  //   //获取本地的goods_id
  //   let { goods_id } = this.props.match.params
  //   // carts.map((v, index) => {
  //   //   v.num = v.num + step
  //   //   console.log(v.num);
  //   // })
  //   //操作数据
  //   let index = carts.findIndex(v=>{
  //     if(v.goods_id ===parseInt(goods_id) ){
  //       return true
  //     }
  //   })
  //   if(index){
  //     carts[index].num++//第n 次添加时 n>1
  //   }
  //   this.setState({
  //     carts
  //   })
  //   localStorage.setItem("carts",JSON.stringify(carts))
  //   // console.log(carts);
  //   // console.log(carts["25932"]);

  //   // this.setState({
  //   //   num:carts.goods.id.num,
  //   //   num1:carts.id.num+ step
  //   // })

  // }

  render() {
    return (
      <div className="yg-carts">
        {/* 首页导航开始 */}
        <div className="yg-carts-nav">
          <NavBar className="carts-nav">优购商城</NavBar>
        </div>
        {/* 首页导航结束 */}
        <div className="carts-img">
          {
            this.state.carts.length ?
              <div className="yg-cart-content">
                {/* 购物车开始 */}
                <div className="cart-content-list">
                  {
                    this.state.carts.map((v, index) => {
                      // console.log(v);
                      return (
                        <div className="content-list-item" key={v.goods_id}>
                          <div className="list-item-left">
                            <i className="iconfont icon-xuanzhong"></i>
                          </div>
                          <div className="list-item-mid">
                            <img src={v.goods_small_logo} alt="" />
                          </div>
                          <div className="list-item-right">
                            <div className="right-top">
                              <div className="right-top-tit">
                                {v.goods_name}
                              </div>
                            </div>
                            <div className="right-bottom">
                              <div className="right-bottom-left">
                                ￥{v.goods_price}v.
                              </div>
                              <div className="right-bottom-rignt" onClick={this.handleClickNum}>
                                <i className="iconfont icon-jian"></i>
                                <span className="num">
                                  {v.num}
                                </span>
                                <i className="iconfont icon-jia"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                      )
                    })
                  }
                </div>
                {/* 购物车结束 */}
                {/* 底部结算栏开始 */}
                <div className="cart-content-bottom">
                  <div className="checkedAll">
                    <i className="circle"></i>
                    <span className="text">全选</span>
                  </div>
                  <div className="totalPrice">
                    <span className="text1">合计</span>
                    <span className="price">￥7866</span>
                  </div>
                  <div className="pay">
                    <span className="text3">去结算</span>
                  </div>
                </div>
                {/* 底部结算栏结束 */}
              </div>
              : <div className="yg-cart-timg">
                <img src={Timg} className="cart-Timg-img" alt="" />
                <h3 className="Timg-title">
                  <a href="#/category">请到商品区选择您的东西</a>
                </h3>
              </div>
          }
        </div>
      </div>
    )
  }
}
